<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
<script src="../jquery-1.12.4.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height()+ "</br>";
    txt+="innerWidth of div: " + $("#div1").innerWidth()+ "</br>";
    txt+="innerHeight of div: " + $("#div1").innerHeight()+ "</br>";
    txt+="outerWidth of div: " + $("#div1").outerWidth()+ "</br>";
    txt+="outerWidth+padding of div: " + $("#div1").outerWidth(true)+ "</br>";
    txt+="浏览器宽度: " + $(document).width()+ "</br>";
    txt+="浏览器高度: " + $(document).height()+ "</br>";
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:200px;width:200px;padding:2px;margin:50px;border:10px solid blue;background-color:lightblue;">
 <div id="div2">div2<div id="div3">div3</div></div>
</div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>

</body>
</html>
